<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单操作</title>
    <style type="text/css">
        form div {
            height: 40px;
            line-height: 40px;
        }

        form div:nth-child(4) {
            height: auto;
        }

        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <form action="http://www.itcast.cn/">
        <div>
            <span>姓名：</span>
            <span>
                <input type="text" v-model="uname">
            </span>
        </div>
        <div>
            <span>性别：</span>
            <span>
                <input type="radio" id="male" value="1" v-model="gender">
                <label for="male">男</label>
                <input type="radio" id="female" value="2" v-model="gender">
                <label for="female">女</label>
            </span>
        </div>
        <div>
            <span>爱好：</span>
            <input type="checkbox" id="ball" value="1" v-model="hobby">
            <label for="ball">篮球：</label>
            <input type="checkbox" id="sing" value="2" v-model="hobby">
            <label for="sing">唱歌：</label>
            <input type="checkbox" id="code" value="3" v-model="hobby">
            <label for="code">写代码：</label>
        </div>
        <div>
            <span>职业：</span>
            <select v-model="occupation" multiple="true">
                <option value="0">请选择职业</option>
                <option value="1">教师</option>
                <option value="2">软件工程师</option>
                <option value="3">律师</option>
            </select>
        </div>
        <div>
            <span>个人简介：</span>
            <textarea v-model="desc"></textarea>
        </div>

        <div>
            <input type="submit" value="提交" @click.prevent="handle">
        </div>
    </form>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            uname: "lisi",
            gender: 1,
            hobby: ['2', '3'],
            occupation: [2, 3],
            desc: "你好！"
        },
        methods: {
            handle: function () {
                console.log("姓名：" + this.uname + "\n性别：" + this.gender
                    + "\n爱好:" + this.hobby + "\n职业：" + this.occupation + "\n描述：" + this.desc);
            }
        }
    })
</script>
</body>
</html>
